<template>
  <div class="all">
    <div class="title">
      <img class="logo" src="../../public/img/logo.png" alt="" />
      <el-icon class="ico1"><Search /></el-icon>
      <el-icon class="ico2"><Setting /></el-icon>
      <img @click="login" class="tx" src="../../public/img/tx.png" alt="" />
    </div>
    <div class="other">
      <img class="otherIco" src="../../public/img/home.png" alt="" />
      <img
        class="otherImg"
        src="../../public/img/Breadcrumb-separator.png"
        alt=""
      />
      <span class="otherWord1">课程管理</span>
      <img
        class="otherImg"
        src="../../public/img/Breadcrumb-separator.png"
        alt=""
      />
      <span class="otherWord2">选课信息</span>
    </div>
    <div class="form">
      <div class="formBox1">
        <div class="formRow">
          <span class="formWord1">学校名称</span>
          <el-input
            class="formInput"
            v-model="formdata.schoolName"
            placeholder="请输入学校名称"
          />
          <span class="formWord1">学生姓名</span>
          <el-input
            class="formInput"
            v-model="formdata.name"
            placeholder="请输入学生姓名"
          />
          <span class="formWord1">全部课程</span>
          <el-select
            v-model="formdata.curriculum"
            class="formSelect"
            placeholder="全部课程"
          >
            <el-option label="基础美术" />
            <el-option label="古风书法" />
            <el-option label="口风琴弹奏表演" />
            <el-option label="初段足球训练营" />
            <el-option label="中段足球训练营" />
            <el-option label="高段足球训练营" />
          </el-select>
        </div>
        <div class="formRow">
          <span class="formWord1">性别</span>
          <el-select
            v-model="formdata.sex"
            class="formInput2"
            placeholder="全部性别"
          >
            <el-option label="男" />
            <el-option label="女" />
          </el-select>
          <span class="formWord1">班级</span>
          <el-select
            v-model="formdata.classRoom"
            class="formInput2"
            placeholder="全部班级"
          >
            <el-option label="一班" />
            <el-option label="二班" />
            <el-option label="三班" />
            <el-option label="四班" />
            <el-option label="五班" />
            <el-option label="六班" />
            <el-option label="七班" />
          </el-select>
        </div>
      </div>
      <div class="formLine"></div>
      <div class="formBox2">
        <el-button class="formButton" type="primary" :icon="ico.Search"
          >查询</el-button
        >
        <el-button class="formButton" type="info" :icon="ico.RefreshRight"
          >重置</el-button
        >
      </div>
    </div>
    <div class="content">
      <div class="contBox">
        <el-button class="contButton" type="primary" :icon="ico.Plus"
          >新建</el-button
        >
        <el-button class="contButton" type="info" :icon="ico.Download"
          >导出</el-button
        >
      </div>
      <div class="table">
        <tablecom :columns="columns" :tableData="tableData" />
      </div>
      <div class="page">
    <el-pagination
      v-model:currentPage="currentPage1"
      :page-size="10"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, prev, pager, next"
      :total="200"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
      </div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import tablecom from "../compents/tablecom.vue";
import {
  Search,
  Setting,
  RefreshRight,
  Plus,
  Download,
} from "@element-plus/icons-vue";
export default {
  components: {
    Search,
    Setting,
    tablecom,
  },
  data() {
    let formdata = reactive({
      schoolName: "",
      name: "",
      curriculum: "",
      sex: "",
      classRoom: "",
    });
    return {
      formdata,
      ico: {
        Search: Search,
        RefreshRight: RefreshRight,
        Plus: Plus,
        Download: Download,
      },
      columns: [
        {
          label: "编号",
          prop: "id",
          width:"90px"
        },
        {
          label: "学校",
          prop: "school",
          width:"251px"
        },
        {
          label: "课程",
          prop: "curriculum",
          width:"163px"
        },
        {
          label: "姓名",
          prop: "name",
          width:"90px"
        },
        {
          label: "年级",
          prop: "grade",
          width:"83px"
        },
        {
          label: "班级",
          prop: "class",
          width:"87px"
        },
        {
          label: "联系电话",
          prop: "phone",
          width:"132px"
        },
        {
          label: "时间",
          prop: "time",
          width:"398px"
        },
        {
          label: "操作",
          prop: "operation",
          width:"66px"
        },
      ],
      tableData: [
        {
          id: "9044",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "高段足球训练营",
          name: "王文志",
          grade: "一年级",
          class: "四班",
          phone: "18114286644",
          time: "2022-06-27 20:57:13",
          operation: "删除",
        },
        {
          id: "8994",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "基础美术",
          name: "孙檗",
          grade: "二年级",
          class: "一班",
          phone: "13605752328",
          time: "2022-06-27 20:57:13",
          operation: "删除",
        },
        {
          id: "7569",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "古风书法",
          name: "赵妍",
          grade: "三年级",
          class: "七班",
          phone: "13357383807",
          time: "2022-06-23 12:03:45",
          operation: "删除",
        },
        {
          id: "6850",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "中段足球训练营",
          name: "郑喜阳",
          grade: "一年级",
          class: "四班",
          phone: "18278246447",
          time: "2022-06-23 12:03:45",
          operation: "删除",
        },
        {
          id: "5659",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "口风琴弹奏表演",
          name: "赵敏",
          grade: "四年级",
          class: "二班",
          phone: "15518804647",
          time: "2022-06-23 12:03:45",
          operation: "删除",
        },
        {
          id: "5391",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "高段足球训练营",
          name: "王鹏云",
          grade: "六年级",
          class: "三班",
          phone: "18654937057",
          time: "2022-06-23 12:03:45",
          operation: "删除",
        },
        {
          id: "4801",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "中段足球训练营",
          name: "赵林",
          grade: "四年级",
          class: "五班",
          phone: "13343457370",
          time: "2022-06-23 12:03:45",
          operation: "删除",
        },
        {
          id: "3689",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "古风书法",
          name: "李英顺",
          grade: "四年级",
          class: "二班",
          phone: "15138736785",
          time: "2022-06-22 16:12:46",
          operation: "删除",
        },
        {
          id: "3405",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "基础美术",
          name: "赵学海",
          grade: "二年级",
          class: "三班",
          phone: "13164430225",
          time: "2022-06-22 07:28:05",
          operation: "删除",
        },
        {
          id: "1443",
          school: "四川大学附属实验小学江安河分校",
          curriculum: "口风琴弹奏表演",
          name: "郑夕川",
          grade: "三年级",
          class: "一班",
          phone: "15046076558",
          time: "2022-06-21 13:46:52",
          operation: "删除",
        },
      ],
    };
  },
  methods: {
    login() {
      this.$router.push("./login");
    },
  },
};
</script>

<style lang="less" scoped>
.all {
  display: flex;
  width: 1440px;
  height: 856px;
  flex-direction: column;
  align-items: center;
  background: rgba(247, 248, 250, 1);
  .title {
    display: flex;
    width: 1440px;
    height: 60px;
    align-items: center;
    background-color: #fff;
    .logo {
      margin-left: 16px;
      width: 131px;
      height: 27px;
    }
    .ico1 {
      margin-left: 1155px;
      margin-right: 31px;
      width: 18px;
      height: 18px;
    }
    .ico2 {
      margin-right: 24px;
      width: 16px;
      height: 16px;
    }
    .tx {
      width: 32px;
      height: 32px;
    }
  }
  .other {
    display: flex;
    width: 1440px;
    height: 56px;
    align-items: center;
    .otherIco {
      margin-left: 20px;
      width: 16px;
      height: 16px;
    }
    .otherImg {
      width: 12px;
      height: 12px;
    }
    .otherWord1 {
      width: 56px;
      height: 22px;
      opacity: 1;
      color: rgba(78, 89, 105, 1);
      font-size: 14px;
      font-weight: 400;
      font-family: "PingFang SC";
    }
    .otherWord2 {
      margin-left: 4px;
      width: 56px;
      height: 22px;
      opacity: 1;
      color: rgba(29, 33, 41, 1);
      font-size: 14px;
      font-weight: 500;
      font-family: "PingFang SC";
    }
  }
  .form {
    display: flex;
    width: 1400px;
    height: 112px;
    align-items: center;
    background-color: #fff;
    .formBox1 {
      display: flex;
      margin-left: 20px;
      width: 1230px;
      height: 80px;
      flex-direction: column;
      justify-content: space-between;
      .formROw {
        display: flex;
        width: 1230px;
        height: 32px;
      }
      .formWord1 {
        width: 56px;
        height: 22px;
        color: rgba(78, 89, 105, 1);
        font-size: 14px;
        font-weight: 400;
        font-family: "PingFang SC";
      }
      .formInput {
        margin-left: 16px;
        margin-right: 24px;
        width: 322px;
        height: 32px;
      }
      .formInput2 {
        margin-left: 44px;
        margin-right: 24px;
        width: 322px;
        height: 32px;
      }
      .formSelect {
        margin-left: 16px;
        width: 312px;
        height: 32px;
      }
    }
    .formLine {
      margin-left: 26px;
      margin-right: 20px;
      width: 1px;
      height: 80px;
      opacity: 1;
      background: rgba(238, 238, 238, 1);
    }
    .formBox2 {
      display: flex;
      width: 84px;
      height: 80px;
      flex-direction: column;
      justify-content: space-between;
      .formButton {
        margin-left: 0px;
        width: 84px;
        height: 32px;
      }
    }
  }
  .content {
    display: flex;
    width: 1400px;
    height: 608px;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
    .contBox {
      display: flex;
      width: 1360px;
      height: 72px;
      justify-content: space-between;
      align-items: center;
      .contButton {
        margin-left: 0px;
        width: 84px;
        height: 32px;
      }
    }
    .table {
      width: 1360px;
      height: 462px;
    }
    .page{
        margin-top: 20px;
        margin-left: 850px;
        width: 386px;
        height: 32px;
    }
  }
}
</style>
